<template>
  <div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span class="search">
                <el-input
                v-model="input"
                placeholder="规格名称"
                style="width: 150px"
                ></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </span>
            <el-button
                style="float: right"
                type="primary"
                icon="el-icon-plus"
                size="medium"
                @click="$router.push('/product/addUpdateProduct/add')"
                >添加规格</el-button>
        </div>
      <div class="text item">
      <el-table  :data="list" v-loading="loading" border style="width: 100%">
        <el-table-column prop="name" label="规格名称"></el-table-column>
        <el-table-column prop="option" label="规格属性值" width="400">
            <template slot-scope="scope">
                  {{scope.row.option.join()}}
            </template>
        </el-table-column>
        
        <el-table-column prop="category_name" label="规格归类">
        </el-table-column>

        <el-table-column prop="_id" label="操作选项">
          <template slot-scope="scope">
            <el-button size="mini" @click="productDetail(scope.row)">修改</el-button>
            <el-button size="mini" @click="productUpdate(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center">
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="current_change"
          :page-size="pageSize"
          @next-click="handlenext"
          @prev-click="handleprev"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import {getsysAttr,searchsysAttr,delsysAttr} from '../api/index'
export default {
    data(){
        return{
            list:[],
            loading:false,
            input:'',
            total:0,
            pageSize:5
        }
    },
    async mounted() {
        let { data } = await getsysAttr({
            pageNum: 1,
            pageSize: 5,
        });
        this.list=data.data.list
        this.total=data.data.total
  },
  methods:{
      async getsysAttr(val) {
         let {data}=await getsysAttr({
              pageNum: val,
              pageSize: 5,
          });
          this.list=data.data.list
          this.total=data.data.total

    },
    async searchsysAttr(val) {
          let { data } = await searchsysAttr({
              value:val,
              pageNum: 1,
              pageSize: 5,
          });
          this.list=data.data.list
          this.total=data.data.total
    },
    async delsysAttr(id) {
         await delsysAttr({
              _id:id
          });

    },
    search(){
        this.searchsysAttr(this.input)
    },
  
    productUpdate(id){
        this.delsysAttr(id)
    },
    current_change(val){
          this.getsysAttr(val)
      },
      handlenext(val) {
        this.getsysAttr(val);
      },
      handleprev(val) {
        this.getsysAttr(val);
      },
  }
  
}
</script>